<template>
  <div class="two">
    <section class="model">
      <div class="title">创建回合</div>

      <el-form label-position="top" :model="formLabelAlign">
        <el-form-item label="回合名称">
          <el-input v-model.trim="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="最少参与人数（4人起）">
          <el-input class="has" v-model="formLabelAlign.number" type="number" @blur="watchVal('number', 4)">
            <span slot="append">人</span>
          </el-input>
        </el-form-item>
        <el-form-item label="参与金额0.001~）">
          <el-input class="has" v-model="formLabelAlign.money" type="number" @blur="watchVal('money',  info.price)">
            <span slot="append">{{ info.coin_symbol }}</span>
          </el-input>
        </el-form-item>
      </el-form>

      <el-button @click="newCreate">创建新的回合</el-button>

      <p class="span">小提示：1.回合参与者均结束游戏后方可开奖；
      2.回合创建者将收到奖池的8%作为奖励，快去创建回合吧！</p>
    </section>

    <section class="model">
      <h3>{{ user.balance }}{{ info.coin_symbol }}</h3>
      <p class="yue">我的{{ info.coin_symbol }}余额</p>
      <el-button @click="put = true">提现</el-button>

      <p class="text">充值地址</p>

      <div class="address">
        {{ info.wallet_key }}
      </div>

      <div class="bottom">
        <!-- 二维码 -->
        <div class="imgs">
          <img :src="info.img" alt="">
        </div>

        <div class="btns">
          <el-button v-clipboard:copy="info.wallet_key" @click="copyLink">复制充值地址</el-button>
          <el-button class="save-btn" @click="saveImg">保存地址二维码</el-button>
        </div>
      </div>
    </section>

    <section class="model">
      <div class="title">我的游戏记录 </div>
      <table>
        <tr>
          <td v-for="(item, i) in head" :key="i">{{ item }}</td>
        </tr>

        <tr v-for="(item, i) in list" :key="i">
          <td>{{ item.gameNo }}</td>
          <td>{{ item.money }}</td>
          <td>{{ item.rankNum }}</td>
          <td>{{ item.income }}</td>
        </tr>

        <tr v-if="!list || list < 1">
          <td colspan="4">暂无数据</td>
        </tr>
      </table>
    </section>

    <el-dialog
      :visible.sync="put"
      :show-close="false"
      :close-on-click-modal="false">
      <el-form :model="info"
      status-icon ref="ruleForm"
      label-position="top"
      class="demo-ruleForm">
        <el-form-item label="账户余额">
          <span>{{ user.balance }}{{ info.coin_symbol }}</span>
        </el-form-item>
        <el-form-item label="提现账户">
          <span>{{ user.wallet_key }}</span>
        </el-form-item>
        <el-form-item label="输入邮箱">
          <el-input type="text" v-model="user.email" auto-complete="off" placeholder="email" disabled class="email">
            <el-button slot="append" @click="getCode">发送验证码</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input type="text" v-model="info.code" auto-complete="off" placeholder="验证码" :maxlength="8"></el-input>
        </el-form-item>
        <el-form-item label="提现数量" prop="number">
          <el-input type="number" v-model="info.number" auto-complete="off" placeholder="提现数量"></el-input>
        </el-form-item>
        <el-form-item class="radius">
          <i class="el-icon-warning"></i>提现手续费0.01{{ info.coin_symbol }}，将从您的提现金额中扣除

        </el-form-item>
        <el-form-item>
          <el-button class="sure" @click="submitForm('ruleForm')">确定提现</el-button>
          <el-button @click="put = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <canvas id="canvas" v-show="false"></canvas>
  </div>
</template>

<script>
import { notice, success } from '@/utils/res.js'
import EthereumQRPlugin from 'ethereum-qr-code'
export default {
  name: 'two',
  data () {
    return {
      formLabelAlign: {
        name: '跳跃即挖矿，赢者赚以太',
        number: 4,
        money: 0.001
      },
      wallet: 0.001,
      head: ['游戏序列', '参与金额', '我的排名', '我的收益'],
      list: [
      ],
      put: false,
      info: {
        banlance: 3.2,
        name: '0xfsdfjwerifsakdfjl',
        email: '',
        code: '',
        name1: '',
        name2: '',
        number: '',
        id: '',
        img: '',
        wallet_key: '',
        coin_symbol: '',
        price: ''
      }
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  methods: {
    watchVal (val, num) {
      let value = this.formLabelAlign[val]
      if (value < num) {
        notice('该数值不能小于' + num)
        this.formLabelAlign[val] = num
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$store.dispatch('details/withdraw', {
            head: 1,
            language: 'cn',
            code: this.info.code,
            num: this.info.number
          })
          this.put = false
          // if (res.RET === 1) this.$router.push('')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getCode () {
      this.$store.dispatch('details/withdrawEmail', {
        language: 'cn',
        head: 1
      })
    },
    copyLink () {
      success('复制成功')
    },
    saveImg () {
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(this.info.img)
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true)
      aLink.download = 'code.png'
      aLink.href = URL.createObjectURL(blob)
      aLink.click()
    },
    base64ToBlob (code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], {type: contentType})
    },
    newCreate () {
      if (this.formLabelAlign.money > this.user.balance) {
        notice('请充值')
        return
      }
      if (!this.formLabelAlign.name) {
        notice('回合名称不为空')
        return
      }
      this.$store.dispatch('jump/create', {
        ck: this.user.email,
        name: this.formLabelAlign.name,
        mp: this.formLabelAlign.number,
        mm: this.formLabelAlign.money
      })
        .then(res => {
          if (res.code === 0) {
            this.$store.commit('AROUNID', res.result.aroundId)
            this.$router.push({path: '/three', query: {join: res.result.aroundId}})
            // this.$router.push('/three')
          }
        })
    },
    getList () {
      this.$store.dispatch('jump/record', {
        ck: this.user.email
      })
        .then(res => {
          if (res.code === 0) {
            this.list = res.result
            console.log(res.result)
          }
        })
    }
  },
  async created () {
    let roomId = window.location.href.split('room=')[1] || this.$store.state.roomId
    await this.$store.dispatch('getUser', {
      language: 'cn',
      head: 1
    })
    this.getList()
    this.$store.dispatch('details/collectionAccount', {room: roomId})
      .then(res => {
        if (res.RET === 1) {
          this.info.coin_symbol = res.DATA[0].coin_symbol
          this.info.price = res.DATA[0].price
          this.info.id = res.DATA[0].id
          this.info.wallet_key = res.DATA[0].wallet_key
          this.formLabelAlign.money = res.DATA[0].price
          const qr = new EthereumQRPlugin()
          qr.toDataUrl({
            to: this.info.wallet_key
          }, {
            selector: '#my-qr-code'
          }).then(res => {
            this.info.img = res.dataURL
            // console.log(res)
          })
        } else {
          notice(res.MSG)
        }
      })
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variable.scss';
.two {
  .model {
    padding: 30px 20px 20px;
    position: relative;
    margin: -12px 20px 20px;
    border: 4px solid $model-border;
    border-radius: 10px;
    background: $model-bg;
    margin-top: 40px;

    .title {
      // padding: 0 14px;
      width: 150px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      top: -24px;
      line-height: 40px;
      background: $model-btn;
      text-align: center;
      border: 4px solid $model-border;
      border-radius: 10px;
      box-sizing: border-box;
      color: $model-border;
      font-weight: bolder;
    }

    &:nth-child(2) {
      padding-top: 20px;
    }

    > h3 {
      font-size: 30px;
      text-align: center;
      line-height: 30px;
      color: $blue-text;
    }

    > .yue {
      font-size: 12px;
      text-align: center;
      color: $model-border;
    }

    > .text {
      color: $model-border;
      font-weight: bold;
      line-height: 40px;
      text-align: left;
    }

    .address {
      padding: 0 8px;
      font-size: 12px;
      word-break: break-all;
      background: $white;
      color: $model-border;
      line-height: 20px;
    }

    > .red {
      transform: scale(0.8, 0.8);
      color: $red;
    }

    > .icon {
      position: absolute;
      right: 20px;
      top: 10px;

      > img {
        width: 20px;
      }
    }

    > .label {
      position: absolute;
      right: -24px;
      top: 10px;
      padding: 4px 8px;
      padding-left: 16px;
      background: $model-bg;
      color: $blue-text;
      border: 2px solid $model-border;
      border-right-width: 0;
      font-size: 12px;
      box-shadow: 0 3px 3px #999;

      > .triangle {
        position: absolute;
        left: -10px;
        width: 15px;
        height: 15px;
        border: 2px solid $model-border;
        border-left: none;
        border-bottom: none;
        background: $model-bg;
        transform: rotate(45deg) translateY(-1px);
      }
    }

    .el-button {
      display: block;
      margin: 20px auto 0;
      background: $btns;
      color: $white;
      border: 2px solid $model-border;
      border-radius: 40px;
      padding: 9px 18px;
    }

    > .el-form {
      .el-form-item {
        margin-bottom: 0;
      }

      .el-form-item__label {
        padding: 0;
      }

      .el-input__inner {
        text-align: center;
      }
    }

    > .bottom {
      > .imgs {
        float: left;
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .el-button {
        padding: 9px 0;
        width: 124px;
      }

      .save-btn {
        background: $model-btn;
        color: $model-border;
      }
    }

    > table {
      width: 100%;
      color: $model-border;
      font-size: 14px;
      text-align: center;
      line-height: 30px;

      tr {
        border-radius: 4px;
      }

      tr:nth-child(even) {
        background: $white;
      }
    }

    > .span {
      margin-top: 20px;
      color: #ccc;
      font-size: 12px;
      white-space: pre-line;
    }
  }

  .el-input-group__append {
    padding: 0;
    width: 40px;
    text-align: center;
    background: $white;
  }

  .has {
    .el-input__inner {
      border-right: 0;
    }
  }

  .el-dialog {
    margin-top: 5px !important;
    // background: $theme;
    .el-dialog__header {
      display: none;
    }

    .el-form {
      .el-form-item__label {
        padding: 0;
      }

      .el-form-item {
        margin-bottom: 0;
      }

      .el-form-item__content {
        text-align: center;
      }
    }
  }
}
</style>
